<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.drawing.yaxis.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Line chart with a static Y axis</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Line chart with a Y axis that doesn't move" />
     
</head>
<body>

    <h1>A Line chart with a static Y axis</h1>
    
    <p>
        A chart where the left Y axis is static and doesn't move when you scroll from left to right. Firefox doesn't support the
        required property on the event object so the tooltips are out of place in this browser. The scrolling effect works however.
    </p>
    
    <script>
        $(document).ready(function ()
        {
            // This is the code that produces the chart
            var line = new RGraph.Line({
                id: 'cvs',
                data: [4,6,8,5,9,6,4,8,4,6,15,2],
                options: {
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    tooltips: {
                        self: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                        coords: {
                            page: true
                        }
                    },
                    noxaxis: true,
                    noyaxis: true,
                    ylabels: false,
                    hmargin: 25,
                    tickmarks: 'endcircle',
                    gutter: {
                        left: 0
                    }
                }
            }).draw()
            
            var yaxis = new RGraph.Drawing.YAxis({
                id: 'axes',
                x: 40,
                options: {
                    max: line.max,
                    colors: ['black'],
                    title: 'A static Y axis'
                }
            }).draw()
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>


    <div style="position: relative">
        <canvas id="axes" width="41" height="200" style="position: absolute; top: 0; left: 0; z-index: 3"></canvas>
        <div style="width: 600px; overflow: auto; position: absolute; left: 41px">
            <canvas id="cvs" width="1000" height="200"></canvas>
        </div>
    </div>

</body>
</html>